<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>网关配置</title>
    <link rel="shortcut icon" href="/res/img/favicon.ico" type="image/x-icon">
    <link href="/res/layui/css/layui.css" rel="stylesheet">
    <link href="/res/codemirror6.65.7/codemirror.min.css" rel="stylesheet">
    <link href="/res/css/common.css" rel="stylesheet">
    <style>
        .CodeMirror {
            height: 100%;
        }

        .CodeMirror-wrap {
            border: 2px solid red;
        }
    </style>
</head>
<body class="layui-anim layui-anim-downbit" style="height: 100%">
<button id="save" style="margin-left: 10px;" type="button" class="layui-btn layui-btn-normal">
    <i class="layui-icon layui-icon-set"></i> 保存提交修改
</button>
<button id="see" style="margin-left: 10px;" type="button" class="layui-btn layui-btn-primary layui-border-blue">
    <i class="layui-icon layui-icon-release"></i> 路由转发列表
</button>
<button id="sample" style="margin-left: 10px;" type="button" class="layui-btn layui-btn-primary layui-border-blue">
    <i class="layui-icon layui-icon-fonts-code"></i> 查看样例
</button>
<div class="flex-column" style="margin-top: 10px;height: 90%">
    <textarea id="xml">${xml!}</textarea>
    <textarea id="old" style="display: none">${yaml!}</textarea>
</div>

<script src="/res/js/request.js"></script>
<script src="/res/layui/layui.js"></script>
<script src="/res/codemirror6.65.7/codemirror.js"></script>
<script src="/res/codemirror6.65.7/xml.min.js"></script>
<script>
    var editor
    var isEdit = false
    layui.use(function () {
        var $ = layui.jquery
        editor = CodeMirror.fromTextArea(document.getElementById("xml"), {
            mode: "xml",
            lineNumbers: true,  //显示行号
            lineWrapping: true, //代码折叠
            foldGutter: true,
        });
        $('#save').click(function () {
            layer.prompt({
                title: '提示', formType: 2,
                success: function (layero, index, that) {
                    var textarea = $(layero).find('textarea');
                    textarea.attr('placeholder', '修改备注, 不能为空')
                    textarea.css('margin-top', '10px')
                    textarea.before(`<b style="color: red">确认更新配置并重启网关？</b>`)
                }
            }, function (txt, index) {
                if (!txt || txt.length < 1) {
                    layer.msg('备注不能为空')
                    return
                }
                if (txt.length > 125) {
                    layer.msg('备注不能超过125个字符')
                    return
                }
                var index_ = layer.msg('请等待', {icon: 16, shade: 0.6, time: 20000});
                request.post('/api/config', {
                    data: {xml: editor.getValue(), remark: txt},
                    success(res) {
                        if (res.msg && res.msg.indexOf('无变化') !== -1) {
                            layer.msg(res.msg)
                            return
                        }
                        layer.msg(res.msg, {icon: 1});
                        setTimeout(function () {
                            window.location.reload()
                        }, 1200)
                    },
                    finally() {
                        layer.close(index_);
                        layer.close(index);
                    }
                })
            });
        })
        $('#see').click(function () {
            layer.open({
                title: '路由转发',
                type: 2,
                maxmin: true,
                closeBtn: 1,
                move: true,
                area: ['70%', '80%'],
                content: '/router'
            });
        })
        $('#sample').click(function () {
            window.parent.open('/sample')
        })
    })
</script>
</body>
</html>